<section style="width: 100%">
  <h5>format:</h5>
  <div class="input-group" style="margin-bottom: 10px; width: 200px">
    <d-select [size]="'sm'" [(ngModel)]="dateFormat" [options]="dateFormatOptions"></d-select>
  </div>
  <div class="devui-input-group devui-dropdown-origin" dActiveFormControl>
    <input
      class="devui-input devui-form-control"
      placeholder="y/MM/dd  -  y/MM/dd"
      name="dp"
      [(ngModel)]="dateRange1"
      (click)="dateRangePicker1.toggle()"
      autocomplete="off"
      dDateRangePicker
      #dateRangePicker1="dateRangePicker"
      (selectedRangeChange)="getValue($event)"
      [dateFormat]="dateFormat"
    />
    <div *ngIf="everyRange(dateRange1)" class="devui-input-group-addon close-icon-wrapper" (click)="dateRangePicker1.clearAll()">
      <i class="icon icon-close"></i>
    </div>
    <div class="devui-input-group-addon" (click)="dateRangePicker1.toggle()">
      <i class="icon icon-calendar"></i>
    </div>
  </div>
  <h5>dateConfig:</h5>
  <div class="input-group" style="margin-bottom: 10px; width: 200px">
    <d-select [size]="'sm'" [(ngModel)]="splitter" [options]="splitterOptions"></d-select>
  </div>
  <div class="devui-input-group devui-dropdown-origin" dActiveFormControl>
    <input
      class="devui-input devui-form-control"
      placeholder="y/MM/dd  -  y/MM/dd"
      name="dp"
      [(ngModel)]="dateRange2"
      (click)="dateRangePicker2.toggle()"
      autocomplete="off"
      dDateRangePicker
      #dateRangePicker2="dateRangePicker"
      (selectedRangeChange)="getValue($event)"
      [dateConfig]="dateConfig"
      [splitter]="splitter"
    />
    <div *ngIf="everyRange(dateRange2)" class="devui-input-group-addon close-icon-wrapper" (click)="dateRangePicker2.clearAll()">
      <i class="icon icon-close"></i>
    </div>
    <div class="devui-input-group-addon" (click)="dateRangePicker2.toggle()">
      <i class="icon icon-calendar"></i>
    </div>
  </div>
</section>
